<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload = function() {
		var poltronas = [ true, true, true, true, true, true, true, true ];
		inicializarPoltronas(poltronas);
	}

	function inicializarPoltronas(poltronas) {
		var ancoras = document.getElementsByTagName('a');
		for ( var i = 0; i < ancoras.length; i++) {
			if (ancoras[i].className == 'poltrona') {
				setarEstadoPoltrona(ancoras[i], poltronas[i]);
				ancoras[i].onclick = function(e) {
					e.preventDefault();
					alternarEstadoPoltrona(this);
				}
			}
		}
	}

	function setarEstadoPoltrona(poltrona, estado) {
		if (estado === false) {
			poltrona.setAttribute('rel', 'ocupada');
			var img = poltrona.getElementsByTagName('img')[0];
			alterarImagem(img, 'images/pselecionada.png');
		} else {
			poltrona.setAttribute('rel', 'livre');
			var img = poltrona.getElementsByTagName('img')[0];
			alterarImagem(img, 'images/plivre.png');
		}
	}

	function alternarEstadoPoltrona(poltrona) {
		var estadoAtual = poltrona.getAttribute('rel');
		novoEstado = estadoAtual == 'livre' ? false : true;
		setarEstadoPoltrona(poltrona, novoEstado);
	}

	function alterarImagem(img, novoSrc) {
		img.setAttribute('src', novoSrc);
	}
</script>
<style type="text/css">
#filaPotronas1 {
	margin-top: 330px;	
	margin-left: 150px;
}
#filaPotronas2 {
	margin-top: 10px;	
	margin-left: 150px;
}
#filaPotronas3 {
	margin-top: 50px;	
	margin-left: 150px;
}
#filaPotronas4 {
	margin-top: 10px;	
	margin-left: 150px;
}
#plane {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
	margin-left: 20px;
}
</style>
</head>
<body>
	<div id="filaPotronas1">
		<a href="#" class="poltrona" rel="poltrona-0"> <img
			src="images/plivre.png" alt="poltrona /">
		</a> <a href="#" class="poltrona" rel="poltrona-1"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-2"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-3"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-4"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-5"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-6"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-7"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-8"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-9"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-10"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-11"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-12"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-13"><img src="images/plivre.png"
			alt="poltrona /"></a>
	</div>
	<div id="filaPotronas2">
		<a href="#" class="poltrona" rel="poltrona-0"> <img
			src="images/plivre.png" alt="poltrona /">
		</a> <a href="#" class="poltrona" rel="poltrona-1"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-2"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-3"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-4"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-5"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-6"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-7"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-8"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-9"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-10"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-11"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-12"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-13"><img src="images/plivre.png"
			alt="poltrona /"></a>
	</div>
	<div id="filaPotronas3">
		<a href="#" class="poltrona" rel="poltrona-0"> <img
			src="images/plivre.png" alt="poltrona /">
		</a> <a href="#" class="poltrona" rel="poltrona-1"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-2"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-3"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-4"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-5"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-6"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-7"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-8"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-9"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-10"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-11"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-12"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-13"><img src="images/plivre.png"
			alt="poltrona /"></a>
	</div>
	<div id="filaPotronas4">
		<a href="#" class="poltrona" rel="poltrona-0"> <img
			src="images/plivre.png" alt="poltrona /">
		</a> <a href="#" class="poltrona" rel="poltrona-1"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-2"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-3"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-4"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-5"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-6"><img src="images/plivre.png"
			alt="poltrona /"></a> <a href="#" class="poltrona" rel="poltrona-7"><img
			src="images/plivre.png" alt="poltrona /"></a> <a href="#"
			class="poltrona" rel="poltrona-8"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-9"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-10"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-11"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-12"><img src="images/plivre.png"
			alt="poltrona /"></a>
			<a href="#"
			class="poltrona" rel="poltrona-13"><img src="images/plivre.png"
			alt="poltrona /"></a>
	</div>
	
	<div id="plane">
		<img src="images/plane.png">
	</div>
</body>
</html>